<template>
  <div>
    <div class="header" style="position: relative">
      <!-- <van-image
        width="100%"
        fit="cover"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      /> -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image
            width="100%"
            fit="cover"
            src="http://liufusong.top:8080/img/swiper/1.png"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="100%"
            fit="cover"
            src="http://liufusong.top:8080/img/swiper/2.png"
        /></van-swipe-item>
        <van-swipe-item>
          <van-image
            width="100%"
            fit="cover"
            src="http://liufusong.top:8080/img/swiper/3.png"
        /></van-swipe-item>
      </van-swipe>

      <div class="search">
        <div class="left">
          <van-button to="/citylist" style="width: 70px">
            {{ nowCity ? nowCity : "beijing"
            }}<i style="font-size: 15px; transform: rotate(90deg)">></i>
          </van-button>

          <van-search
            v-model="value"
            style="width: 230px; background-color: #fff"
            placeholder="请输入小区或者地址"
          />
        </div>
        <van-icon
          size="36"
          color="#fff"
          @click="$router.push('/mapFind')"
          style="margin-top: 3px; margin-left: 4px"
          name="search"
        />
      </div>
    </div>
    <van-grid :column-num="4" style="margin-top: 10px; color: #21b98f">
      <van-grid-item to="" icon="home-o" text="整租" />
      <van-grid-item to="" icon="friends-o" text="合租" />
      <van-grid-item icon="search" to="/mapFind" text="地图找房" />
      <van-grid-item icon="wap-home-o" to="/gorent" text="去出租" />
    </van-grid>

    <div class="rentgroup">
      <div class="title">
        <h4>租房小组</h4>
        <span>更多</span>
      </div>
      <van-grid direction="horizontal" :column-num="2" :gutter="10">
        <van-grid-item>
          <van-icon
            size="30"
            style="margin-top: 3px; margin-left: -10px"
            name="home-o"
          />
          <span style="margin-top: 3px; margin-left: 20px"
            >住杭州黑马 <br />
            回家的感觉</span
          >
        </van-grid-item>
        <van-grid-item>
          <van-icon
            size="30"
            style="margin-top: 3px; margin-left: -10px"
            name="home-o"
          />
          <span style="margin-top: 3px; margin-left: 20px"
            >住杭州黑马 <br />
            回家的感觉</span
          >
        </van-grid-item>
        <van-grid-item>
          <van-icon
            size="30"
            style="margin-top: 3px; margin-left: -10px"
            name="home-o"
          />
          <span style="margin-top: 3px; margin-left: 20px"
            >住杭州黑马 <br />
            回家的感觉</span
          >
        </van-grid-item>
        <van-grid-item>
          <van-icon
            size="30"
            style="margin-top: 3px; margin-left: -10px"
            name="home-o"
          />
          <span style="margin-top: 3px; margin-left: 20px"
            >住杭州黑马 <br />
            回家的感觉</span
          >
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCity } from "@/api/cityCode";
export default {
  data() {
    return {
      value: "",
    };
  },
  computed: {
    nowCity() {
      const res = getCity();
      return res.label;
    },
  },
  methods: {
    onConfirm(value, index) {
      this.value = value;
      this.showPicker = false;
    },
  },
};
</script>

<style scoped>
.left {
  width: 300px;
  display: flex;
  overflow: hidden;
}
.search {
  display: flex;
  position: absolute;
  top: 15px;
  left: 15px;
  height: 40px;
}
.rentgroup {
  margin-top: -10px;
  background-color: #f6f5f6;
}
.title {
  display: flex;
  padding: 0 15px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
